<template>
	<div class="customer">

		<el-row style="margin-top: 15px;padding: 20px 0;">
			<el-col :span="24">
				<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
					<el-form-item>
						<el-select v-model="formInline.type" style="width: 120px;" @change="changeType">
							<el-option label="用户名" value="userName"></el-option>
							<el-option label="用户ID" value="userId"></el-option>
							<el-option label="手机号" value="phone"></el-option>
						</el-select>
						<el-input v-model="formInline.name" style="width: 150px;"></el-input>
					</el-form-item>
					<el-form-item label="按会员身份:">
						<el-col :span="18">
							<el-select v-model="formInline.userIdentity">
								<el-option label="全部" value=""></el-option>
								<el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"></el-option>
							</el-select>
						</el-col>

					</el-form-item>
					<el-form-item label="按状态:" label-width="60px">
						<el-select v-model="formInline.userStat" style="width: 120px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="已启用" value="1"></el-option>
							<el-option label="已禁用" value="2"></el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="是否代理:">
						<el-select v-model="formInline.agent" style="width: 120px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="是" value="1"></el-option>
							<el-option label="否" value="0"></el-option>
						</el-select>
					</el-form-item> -->
					<el-button type="primary" @click="fetchData(1)">查询</el-button>

				</el-form>
			</el-col>
		</el-row>

		<el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" stripe @sort-change='order'
		 style="width: 100%">
			<el-table-column prop="userId" label="用户ID">
			</el-table-column>
			<el-table-column label="用户名">
				<template scope="scope">
					<span class="pointer" @click="$router.push('/user/user_detail/'+scope.row.userId)">{{ scope.row.userName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="手机号">
				<template scope="scope">
					<span>{{ scope.row.phone }}</span>
				</template>
			</el-table-column>
			<el-table-column sortable='custom' label="领红包范围(m)" prop="territorial_Limit">
				<template scope="scope">
					<span>{{ scope.row.territorialLimit }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="身份">
				<template scope="scope">
					<!-- <span>{{ findIdentity(scope.row.userIdentity) }}</span> -->
          <span>{{ scope.row.userIdentity=='6'? '创客':'用户' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="创客等级">
				<template scope="scope">
					<span v-if="scope.row.sex == '0' && scope.row.userIdentity!='6'">-</span>
					<!-- <span v-if="scope.row.sex == '0' && scope.row.userIdentity=='6'">创客</span> -->
          <span v-if="scope.row.sex == '0' && scope.row.userIdentity=='6'" >创客</span>
					<span v-if="scope.row.sex == '1' && scope.row.userIdentity=='6'">金牌创客</span>
					<span v-if="scope.row.sex == '2' && scope.row.userIdentity=='6'">合伙人创客</span>
					<span v-if="scope.row.sex == '3' && scope.row.userIdentity=='6'">城主</span>
				</template>
			</el-table-column>
			<el-table-column prop="industry" label="地区">
				<template scope="scope">
					<span>{{ scope.row.industry? scope.row.industry: '-' }}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="userName" label="代理">
				<template scope="scope">
					<span>{{ scope.row.agent==1? '是':'否'}}</span>
				</template>
			</el-table-column>
			<el-table-column sortable='custom' label="拥有主城" prop="territory_Number">
				<template scope="scope">
					<span>{{ scope.row.territoryNumber }}</span>
				</template>
			</el-table-column>
			<el-table-column sortable='custom' label="代理主城" prop="city_Number">
				<template scope="scope">
					<span>{{ scope.row.cityNumber }}</span>
				</template>
			</el-table-column> -->
			<el-table-column label="状态">
				<template scope="scope">
					<span>{{scope.row.userStat == 1?'已启用':'已禁用'}}</span>
				</template>
			</el-table-column>
			<el-table-column width="140" sortable='custom' prop="cre_Time" label="注册时间">
				<template scope="scope">
					<span>{{scope.row.creTime}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="拍店权限">
				<template scope="scope">
					<span style="cursor: pointer;" v-if="scope.row.businessPower==1"><img src="../../assets/images/on.png" width="50"
						 height="50" @click="power(scope.row.userId,'关闭')"></span>
					<span style="cursor: pointer;" v-else><img src="../../assets/images/guan.png" width="50" height="50" @click="power(scope.row.userId,'开启')"></span>
				</template>
			</el-table-column> -->
			<el-table-column label="升级创客" width="200">
				<template scope="scope">
					<div>
						<!-- <el-button type="danger" size="small" v-if="scope.row.userStat==1" @click="quxiao(scope.row.userId,'禁用')">禁用
						</el-button>
						<el-button type="success" size="small" v-else @click="quxiao(scope.row.userId,'启用')">启用
						</el-button> -->
						<!-- <el-button v-if="scope.row.userIdentity!=6" type="primary" size="small" @click="upCk(scope.row.userId)">升级创客
						</el-button> -->
						<el-popover placement="bottom" v-if="scope.row.userIdentity!=6 || scope.row.sex!=3" width="270" style="margin-left: 10px;" trigger="click">
							<div style="text-align: center;">
								<el-select style="width: 120px;" v-model="value" placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
								<el-button @click="upCk(scope.row.userId)" type="primary" size="small">确定</el-button>
								<div v-if="value=='3'" style="margin: 5px;">
									地区：<el-cascader style="width: 200px;" v-model="valueArea" :options="optionsAddress" @change="handleChangeZone" ref="cascaderAddr"></el-cascader>
								</div>
								<div v-if="value=='3'">
									金额：<el-input v-model="price" style="width: 200px;"></el-input>
								</div>
							</div>
							<el-button slot="reference">升级创客</el-button>
						</el-popover>
						<el-button v-else type="primary" size="small">已是创客
						</el-button>

					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template scope="scope">
					<div>
						<el-button type="danger" size="small" v-if="scope.row.userStat==1" @click="quxiao(scope.row.userId,'禁用')">禁用
						</el-button>
						<el-button type="success" size="small" v-else @click="quxiao(scope.row.userId,'启用')">启用
						</el-button>
						<!-- <el-button v-if="scope.row.userIdentity!=6" type="primary" size="small" @click="upCk(scope.row.userId)">升级创客
						</el-button> -->
						<!-- <el-popover placement="bottom" v-if="scope.row.userIdentity!=6 || scope.row.sex!=3" width="200" style="margin-left: 10px;" trigger="click">
							<div>
								<el-select style="width: 120px;" v-model="value" placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
								<el-button @click="upCk(scope.row.userId, scope.row)" type="primary" size="small">确定</el-button>
							</div>
							<el-button slot="reference">升级创客</el-button>
						</el-popover>
						<el-button v-else type="primary" size="small">已是创客
						</el-button> -->

					</div>
				</template>
			</el-table-column>
		</el-table>
		<div class="paginate">
			<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
			 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
			</el-pagination>
		</div>
	</div>

</template>
<style>

</style>
<script>
	import address from '../../adsAddress.js'
	export default {
		data() {
			return {
				title: '用户列表',
				table_loading: false,
				formInline: {
					type: 'userName',
					userName: '',
					phone: '',
					userIdentity: '',
					name: '',
					userStat: '',
					sort: 'CRE_TIME',
					desc: 'DESC',
					pageNum: 1,
					pageSize: 10,
					agent: ''
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				formLabelWidth: '120px',
				arr: [{
					text: '手机号',
					value: '手机号'
				}, {
					text: '用户名',
					value: '用户名'
				}, {
					text: '用户ID',
					value: '用户ID'
				}],
				options: [{
					value: '0',
					label: '创客'
				}, {
					value: '1',
					label: '金牌创客'
				}, {
					value: '2',
					label: '合伙人创客'
				}, {
					value: '3',
					label: '城主'
				}],
				value: '',
				price: '',
				industry: '',
				valueArea: [],
				optionsAddress: address(),
			}
		},
		created() {

		},
		activated() {
			this.fetchData(this.pageInfo.pageNum);
		},
		watch: {
			'formInline.name'(val, oldVal) {
				//console.log(val)
				this.formInline[this.formInline.type] = this.formInline.name
			}
		},
		methods: {
			handleChangeZone(e) {

				let str = this.$refs['cascaderAddr'].currentLabels.toString();
				this.industry = str.replace(/,/g, '-');
			},
			fetchData(page = 1) {
				this.table_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.formInline[this.formInline.type] = this.formInline.name
				this.dataApi.ajax('selectUser', this.formInline, res => {
					console.log('所有用户列表',res)
					this.table_loading = false;
					if (res.responseType === 'S') {
						this.pageInfo = res
            console.log('==========',this.pageInfo)
					}
				});

			},
			changeType() {
				this.formInline.userName = ''
				this.formInline.userId = ''
				this.formInline.phone = ''
			},
			handleCurrentChange(val) {
				this.fetchData(val)
			},
			upCk(id) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 添加更改用户创客身份
				 * @return
				 * @createTime: 2020-8-21 15:15:00
				 */
				let vm = this
				let data = {
					userId: id,
					sex: vm.value
				}
				if(this.value=='3'){
					// 判断金额是否为空
					if(this.valueArea.length==0){
						this.$message.warning('请选择地区');
						return
					}
					if(!this.price || isNaN(Number(this.price))){
						this.$message.warning('请输入正确的金额');
						return
					}
					data.location = this.valueArea.slice(-1)[0];
					data.industry = this.industry;
					data.price = this.price;
				}
				vm.dataApi.ajax('markerAdmin', data, res => {
					if (res.responseType === 'S') {
						vm.value = ''
						vm.showMsg('升级成功')
						vm.fetchData(vm.pageInfo.pageNum)
					}
				});
			},
			quxiao(id, type) {
				var state = ''
				if (type == '启用') {
					state = 1
				} else {
					state = 2
				}
				this.$confirm('确定' + type + '?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataApi.ajax('editUser', {
						userId: id,
						userStat: state
					}, res => {
						if (res.responseType === 'S') {
							this.showMsg(type + '成功')
							this.fetchData(this.pageInfo.pageNum)
						}
					});

				}).catch(() => {

				});
			},
			order(column) {
				if (!column.order) {
					return;
				}
				if (column.order == 'ascending') {
					this.formInline.desc = 'ASC'
				} else {
					this.formInline.desc = 'DESC'
				}
				this.formInline.sort = column.prop.toUpperCase()
				this.fetchData(this.pageInfo.pageNum)
			},
			power(id, type) {
				var state = ''
				if (type == '开启') {
					state = 1
				} else {
					state = 0
				}
				this.$confirm('确定' + type + '?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataApi.ajax('editUser', {
						userId: id,
						businessPower: state
					}, res => {
						if (res.responseType === 'S') {
							this.showMsg(type + '成功')
							this.fetchData(this.pageInfo.pageNum)
						}
					});

				}).catch(() => {

				});
			}

		}
	}
</script>
